<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>中国梦想游首页</title>
    <!--引入静态static的css文件和全局js文件-->
    <link rel="stylesheet" type="text/css" href="/home/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/home/css/hzw-city-picker.css">
    <link rel="stylesheet" type="text/css" href="/home/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/home/css/searchtrain.css"/>
    <link rel="stylesheet" type="text/css" href="/home/css/hzw-city-picker.css">
    <script type="text/javascript" src="/home/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/home/js/jquery-3.5.1.js"></script>
    <!--引入laydate库-->
    <script src="/home/js/plugins/layer/laydate/laydate.js"></script>

    <!--引入Vue.js和Axios -->
    <script type="text/javascript" src="/home/js/vue.js"></script>
    <script type="text/javascript" src="/home/js/axios.js"></script>

    <!-- 智能客服样式 -->
    <style>
        /* 聊天窗口iframe样式 */
        #chatIframe, #websocketIframe {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 350px;
            height: 450px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            z-index: 9999;
            background: transparent;
            transition: transform 0.3s ease;
        }

        #websocketToggleBtn {
            position: fixed;
            bottom: 20px;
            right: 90px;
            width: 60px;
            height: 60px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
            z-index: 10000;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #websocketToggleBtn:hover {
            background: #2E7D32;
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        #websocketToggleBtn.active {
            background: #2c3e50;
        }

        /* 智能客服控制按钮 */
        #chatToggleBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #3480e2;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(52, 128, 226, 0.3);
            z-index: 10000;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #chatToggleBtn:hover {
            background: #004fb3;
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(52, 128, 226, 0.4);
        }

        #chatToggleBtn.active {
            background: #2c3e50;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            #chatIframe {
                width: 100%;
                height: 100%;
                bottom: 0;
                right: 0;
                border-radius: 0;
            }

            #chatToggleBtn {
                width: 56px;
                height: 56px;
                bottom: 15px;
                right: 15px;
            }
        }
    </style>

    <!-- 智能客服控制按钮 -->
    <button id="chatToggleBtn" title="智能客服">
        💬
    </button>

    <!-- Websocket聊天控制按钮 -->
    <button id="websocketToggleBtn" title="在线聊天" onclick="window.location.href='websocket.html'">
        📱
    </button>

    <!-- 智能客服iframe -->
    <iframe id="chatIframe" src="cozeChat.html" frameborder="0" style="display: none;"></iframe>

    <!-- Websocket聊天iframe -->


    <script type="text/javascript">
        window.onload = function () {
            //改变方向
            function chg(o, id) {
                $('#' + id).click(function () {
                    if (o.direct() == 'crt') {
                        o.direct('lvl');
                        $(this).text('纵向');
                    } else {
                        o.direct('crt');
                        $(this).text('横向');
                    }
                });
            }

            function _auto(o, id) {
                $('#' + id).click(function () {
                    if (o.isAuto) {
                        o.isAuto = false;
                        $(this).text('自动播放已停止');
                    } else {
                        o.isAuto = true;
                        o.auto();
                        $(this).text('自动播放');
                    }
                });
            }
        }

        //轮播图代码 - 移到这里避免Vue模板解析问题
        let index = 0;
        //页面加载完成后就执行轮播图
        window.onload = function () {
            let arrImages = [
                "banner01.jpg",
                "banner02.jpg",
                "banner03.jpg",
                "banner04.jpg",
                "banner05.jpg",
                "banner06.jpg",
            ];
            setInterval(function () {
                //通过id=banner给轮播图赋值
                banner.src = "/home/img/banner/" + arrImages[index++];
                if (index == arrImages.length) {
                    index = 0;
                }
            }, 2000);//隔2000毫秒轮播一次
        }
    </script>
    <!--火车票搜索判断-->
    <script type="text/javascript">
        //通过鼠标移入，城市显示
        $(function () {
            var wweya_li = $("div.tab_menu ul li");
            wweya_li.click(function () {
                $(this).addClass("selected")
                    .siblings().removeClass("selected");
                var index = wweya_li.index(this);
                $("div.tab_box > div")
                    .eq(index).show(100)
                    .siblings().hide();
            }).hover(function () {
                $(this).addClass("hover");
            }, function () {
                $(this).removeClass("hover");
            });

            $("#change").click(function () {
                var cun = $("#cityChoice").val();
                $("#cityChoice").val($("#cityChoice1").val());
                $("#cityChoice1").val(cun);
            })

            $(".fangshi ul li").click(function () {
                $(this).addClass("current");
                $(this).siblings().removeClass("current");
                if ($(this).text() == "单程") {
                    $("#flag").val(0);//单程
                    $("#wf").hide();
                } else {
                    $("#flag").val(1);//往返
                    $("#wf").show();
                }
            })


        });

        function chufa() {
            if ($("#cityChoice").val() == "") {
                alert("请选择出发地")
                return false;
            }
            return true;
        }

        function fanhui() {
            if ($("#cityChoice1").val() == "") {
                alert("请选择目的地")
                return false;
            }
            return true;
        }

        function chengshi() {
            if ($("#cityChoice1").val() == $("#cityChoice").val()) {
                alert("出发地不能和目的地一样！！！")
                return false;
            }
            return true;
        }

        function chutime() {
            if ($("#start").text() == "") {
                alert("请选择出发日期")
                return false;
            }
            return true;
        }

        function huitime() {
            if ($("#end").text() == "") {
                alert("请选择返回日期")
                return false;
            }
            return true;
        }

        // 创建Vue实例
        document.addEventListener('DOMContentLoaded', function () {
            new Vue({
                el: '#app',
                data: {
                    startStation: '',
                    endStation: '',
                    goTime: '',
                    backTime: '',
                    flag: 0 // 0表示单程，1表示往返
                },
                methods: {
                    checkForm: function () {
                        if (!this.startStation) {
                            alert('请选择出发地');
                            return false;
                        }
                        if (!this.endStation) {
                            alert('请选择目的地');
                            return false;
                        }
                        if (this.startStation === this.endStation) {
                            alert('出发地不能和目的地一样！！！');
                            return false;
                        }
                        if (!this.goTime) {
                            alert('请选择出发日期');
                            return false;
                        }
                        if (this.flag === 1 && !this.backTime) {
                            alert('请选择返回日期');
                            return false;
                        }
                        return true;
                    },
                    searchTrain: function () {
                        if (this.checkForm()) {
                            // 将查询参数存储到localStorage
                            localStorage.setItem('searchParams', JSON.stringify({
                                startStation: this.startStation,
                                endStation: this.endStation,
                                goTime: this.goTime,
                                backTime: this.backTime,
                                flag: this.flag
                            }));
                            // 跳转到show页面
                            window.location.href = '/home/show.html';
                        }
                    },
                    changeDirection: function () {
                        var temp = this.startStation;
                        this.startStation = this.endStation;
                        this.endStation = temp;
                    },
                    changeFlag: function (type) {
                        this.flag = type;
                    }
                },
                mounted: function () {
                    // 初始化日期选择器
                    var that = this;
                    var start = {
                        elem: "#start",
                        format: "YYYY-MM-DD",
                        min: laydate.now(),
                        max: "2099-06-16 23:59:59",
                        istime: true,
                        istoday: false,
                        choose: function (a) {
                            end.min = a;
                            end.start = a;
                            // 在选择日期时直接更新Vue的数据
                            that.goTime = a;
                            console.log('出发日期已更新:', that.goTime);
                        }
                    };
                    var end = {
                        elem: "#end",
                        format: "YYYY-MM-DD",
                        min: laydate.now(),
                        max: "2099-06-16 23:59:59",
                        istime: true,
                        istoday: false,
                        choose: function (a) {
                            start.max = a;
                            // 在选择日期时直接更新Vue的数据
                            that.backTime = a;
                            console.log('返回日期已更新:', that.backTime);
                        }
                    };
                    laydate(start);
                    laydate(end);

                    // 额外添加定时器检查，确保日期值同步
                    setInterval(function () {
                        var startDate = $('#start').text().trim();
                        var endDate = $('#end').text().trim();

                        if (startDate && startDate !== that.goTime) {
                            that.goTime = startDate;
                            console.log('通过定期检查更新出发日期:', that.goTime);
                        }

                        if (endDate && endDate !== that.backTime) {
                            that.backTime = endDate;
                            console.log('通过定期检查更新返回日期:', that.backTime);
                        }
                    }, 300);

                    // 初始化城市选择器
                    var cityPicker1 = new HzwCityPicker({
                        data: data,
                        target: 'cityChoice',
                        valType: 'k-v',
                        hideCityInput: {
                            name: 'city',
                            id: 'city'
                        },
                        hideProvinceInput: {
                            name: 'province',
                            id: 'province'
                        },
                        callback: function () {
                            // 当选择城市后，手动触发change事件
                            $('#cityChoice').trigger('change');
                        }
                    });
                    cityPicker1.init();

                    var cityPicker2 = new HzwCityPicker({
                        data: data,
                        target: 'cityChoice1',
                        valType: 'k-v',
                        hideCityInput: {
                            name: 'city',
                            id: 'city'
                        },
                        hideProvinceInput: {
                            name: 'province',
                            id: 'province'
                        },
                        callback: function () {
                            // 当选择城市后，手动触发change事件
                            $('#cityChoice1').trigger('change');
                        }
                    });
                    cityPicker2.init();

                    // 监听城市选择变化
                    $('#cityChoice').on('change', function () {
                        that.startStation = $(this).val();
                        console.log('出发地选择已更新:', that.startStation);
                    });
                    $('#cityChoice1').on('change', function () {
                        that.endStation = $(this).val();
                        console.log('目的地选择已更新:', that.endStation);
                    });

                    // 添加定时器来定期检查输入框的值变化
                    setInterval(function () {
                        var startVal = $('#cityChoice').val();
                        var endVal = $('#cityChoice1').val();

                        if (startVal !== that.startStation) {
                            that.startStation = startVal;
                            console.log('通过定期检查更新出发地:', that.startStation);
                        }

                        if (endVal !== that.endStation) {
                            that.endStation = endVal;
                            console.log('通过定期检查更新目的地:', that.endStation);
                        }
                    }, 300);
                }
            });
        });

        // 保留原有函数以确保兼容性
        function checkForm() {
            if ($("#flag").val() == 0) {
                if (chufa() && fanhui() && chengshi() && chutime()) {
                    var time1 = $("#start").text()
                    $("#time1").val(time1)
                    return true;
                } else {
                    return false;
                }
            }
            if ($("#flag").val() == 1) {
                if (chufa() && fanhui() && chengshi() && chutime() && huitime()) {
                    var time1 = $("#start").text()
                    var time2 = $("#end").text()
                    $("#time1").val(time1)
                    $("#time2").val(time2)
                    return true;
                } else {
                    return false;
                }

            }
        }

        function tishi(op) {
            if (op == 1) {
                alert("没有所查车次,请重新填写查询信息")
            }
        }
    </script>
</head>
<body onload="tishi();">

<!--引入顶部文件-->
<div id="header"></div>

<!--搜索框-->
<div class="base_bd posre" id="app">
    <div class="s_box">
        <div class="s_box_tab">
            <a href="#" class="current"
               style="width: 320px; width: 320px; font-family: inherit; font-size: 31px; padding-top: 7px;">梦想游火车票</a>
            <!-- <a href="http://rails.ctrip.com/">国际台湾火车票</a> -->
        </div>
        <div class="search_box">
            <div class="fangshi">
                <ul class="search_type" id="searchtype"
                    style="margin-left: 50px; margin-left: 50px; font-size: 19px; font-weight: 800; padding-top: 8px; margin-bottom: -19px;">
                    <li :class="{current: flag === 0}" @click="changeFlag(0)">单程</li>
                    <li :class="{current: flag === 1}" @click="changeFlag(1)">往返</li>
                </ul>
            </div>
            <!--搜索火车车次-->
            <div class="search_form">


                <form @submit.prevent="searchTrain">
                    <div class="search_txt">
                        <!--flag判断选择的是单程(flag=0)还是往返(flag=1)-->
                        <input type="hidden" v-model="flag" name="flag" id="flag">
                        <input type="hidden" id="timeChangeFlag" name="changeFlag" value="default">

                        <!--隐藏域保存出发日期和返程日期-->
                        <input type="hidden" v-model="goTime" name="go_time" id="time1">
                        <input type="hidden" v-model="backTime" name="back_time" id="time2">
                        <!--出发地-->
                        <input type="text" name="start_station" id="cityChoice" readonly="readonly"
                               class="input_txt225" tabindex="1" style="margin: 7px 0 0 -1px;" placeholder="出发地"
                               v-model="startStation">
                        <div class="search_city" id="notice01div">
                            <span>出发城市</span><i></i>
                        </div>
                        <a href="#" class="chage" id="change" @click.prevent="changeDirection"></a>
                    </div>
                    <div class="search_txt txt_tab" bus="true">
                        <!--目的地-->
                        <input type="text" name="end_station" id="cityChoice1" readonly="readonly" placeholder="目的地"
                               class="input_txt225" value="" tabindex="8" style="margin: -10px 0 0 -1px;"
                               v-model="endStation">
                        <div class="search_city" id="notice08div">
                            <span>到达城市</span><i></i>
                        </div>
                    </div>

                    <div class="search_txt" id="singleDate">
                        <div style="display: none;">
                            <input id="hello" class="laydate-icon form-control layer-date">
                        </div>
                        <div class="form-group">
                            <ul class="inline">
                                <div>
                                    <font style="font-size: 14px; line-height: 40px;">出发日期：</font>
                                    <li class="inline laydate-icon" id="start"
                                        style="width: 160px; display: inline-block; line-height: 35px; margin-right: 10px; margin-top: -8px;"></li>
                                </div>
                                <div id="wf" :style="{display: flag === 1 ? 'block' : 'none'}"
                                     style="margin-top: 10px;">
                                    <font style="font-size: 14px; line-height: 20px;">返回日期：</font>
                                    <li class="inline laydate-icon" id="end"
                                        style="line-height: 35px; width: 160px; display: inline-block; margin-top: -8px;"></li>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <!--查询-->
                    <input type="submit" value="查询" class="searchbtn" id="searchbtn"
                           style="margin-top: -9px;background-color: #ff8000">
                </form>


            </div>
        </div>
    </div>
    <!--右侧轮播图-->
    <div class="adv_bd" id="divAppBanner">
        <img id="banner" src="/home/img/banner/banner01.jpg" width="840px" height="360px" style="border-radius: 4px">
    </div>
</div>
</div>
<!--seotool-->
<div class="seotool">
    <div class="base_bd">
        <table width="100%">
            <!--class="seotool"-->
            <tbody>
            <tr>
                <td width="16%"><a href="ticket-query.html" target="_blank"><i class="i_seo icon1"></i>余票查询</a></td>
                <td width="5%"><i class="i_seo l_line"></i></td>
                <td width="16%"><a href="#" target="_blank"><i class="i_seo icon2"></i>代售点查询</a></td>
                <td width="5%"><i class="i_seo l_line"></i></td>
                <td width="16%"><a href="#" target="_blank"><i class="i_seo icon3"></i>时刻表查询</a></td>
                <td width="5%"><i class="i_seo l_line"></i></td>
                <td width="16%"><a href="#" target="_blank"><i class="i_seo icon4"></i>预售期查询</a></td>
                <td width="5%"><i class="i_seo l_line"></i></td>
                <td width="16%"><a href="#" target="_blank"><i class="i_seo icon5"></i>常见问题</a></td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<div class="hottrain">
    <div class="base_bd">
        <div class="titbar">
            <h2>
                坐火车去旅行<span>/热门火车旅游线路</span>
            </h2>
        </div>

        <div class="product_list" id="ul_hotline">
            <div class="product_bd train">
                <a href="#" target="_blank"> <i class="i_recom">推荐</i>
                    <div class="product_img">
                        <img src="/home/img/zzz_236152_3.jpg"
                             alt="">
                    </div>
                    <div class="product_cont">
                        <span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
                        <p class="product_tit">京广高铁</p>
                        <p class="train_colt current">
                            <span class="fr" title="热度">92% <i class="i_colt"></i></span>天南地北任我游
                        </p>
                    </div>
                </a>
            </div>

            <div class="product_bd train">
                <a href="#" target="_blank">
                    <div class="product_img">
                        <img src="/home/img/zzz_236152.jpg"
                             alt="">
                    </div>
                    <div class="product_cont">
                        <span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
                        <p class="product_tit">京沪高铁</p>
                        <p class="train_colt current">
                            <span class="fr" title="热度">95% <i class="i_colt"></i></span>千里京沪一日还
                        </p>
                    </div>

                </a>
            </div>

            <div class="product_bd train">
                <a href="#" target="_blank">
                    <div class="product_img">
                        <img src="/home/img/zzz_236152_2.jpg"
                             alt="">
                    </div>
                    <div class="product_cont">
                        <span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
                        <p class="product_tit">宁杭甬</p>
                        <p class="train_colt current">
                            <span class="fr" title="热度">89% <i class="i_colt"></i></span>最养眼的高铁线路
                        </p>
                    </div>

                </a>
            </div>

            <div class="product_bd train">
                <a href="#" target="_blank">
                    <div class="product_img">
                        <img src="/home/img/zzz_236152_1.jpg" alt="">
                    </div>
                    <div class="product_cont">
                        <span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
                        <p class="product_tit">成渝高铁</p>
                        <p class="train_colt current">
                            <span class="fr" title="热度">88% <i class="i_colt"></i></span>爱上天府之国
                        </p>
                    </div>
                </a>
            </div>


        </div>
    </div>
</div>

<!--热门线路-->
<div class="base_bd">
    <div class="titbar">
        <div id="citytabs" class="citytabs">
            <a href="#" class="">上海</a>
            <a href="#" class="">北京</a>
            <a href="#" class="">杭州</a>
            <a href="#" class="">广州</a>
            <a href="#" class="">南京</a>
            <a href="#" class="">天津</a>
            <a href="#" class="">武汉</a>
            <a href="#" class="">西安</a>
        </div>
        <h2>
            热门线路<span>/热门路线推荐</span>
        </h2>
    </div>
    <div class="hotline" style="display: inline-block;">
        <table width="28%" class="hotline_bd">
            <tr>
                <td width="14%"><i class="hotline_dashed"></i></td>
            </tr>
            <tr>
                <td width="24%">
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>236.5</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-zhengzhou/dongche/">北京 <i
                            class="arr"></i> 郑州</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>175.5</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-wenzhou/dongche/">合肥 <i
                            class="arr"></i> 温州</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>96.0</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-ningbo/dongche/">台湾 <i
                            class="arr"></i> 宁波</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>328.0</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-xiamen/dongche/">深圳 <i
                            class="arr"></i> 厦门</a></p>
                </td>
            </tr>
            <tr>
                <td width="14%"><i class="hotline_dashed"></i></td>
            </tr>
            <tr>
                <td width="24%">
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>261.5</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-fuzhou/dongche/">厦门 <i
                            class="arr"></i> 福州</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>237.0</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-nanchang/dongche/">广州 <i
                            class="arr"></i> 南昌</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>89.5</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-yiwu/dongche/">杭州 <i class="arr"></i>
                        义乌</a></p>
                    <p><span class="base_price"><dfn>&yen;</dfn><strong>22.5</strong>起</span><a
                            href="http://trains.ctrip.com/TrainBooking/shanghai-suzhou/dongche/">上海 <i
                            class="arr"></i> 苏州</a></p>
                </td>
            </tr>
        </table>
        <div class="scroll" id="scrollbox" onMouseMove="MoveDiv(event);"
             onMouseOut="MoveOutDiv();"
             style="float: right;width: 700px ; margin-left:470px; margin-top: -160px;display: inline-block;">
            <div id="scrollcon" style="width: 100%;">
                <table>
                    <tbody>
                    <tr>
                        <td valign="top">
                            <table width="100%">
                                <tr>
                                    <td><a href="#" target="_blank">
                                        <img height="150"
                                             width="150" alt="1" src="/home/img/gdpic/11.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="2"
                                                                         src="/home/img/gdpic/22.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="3"
                                                                         src="/home/img/gdpic/33.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="4"
                                                                         src="/home/img/gdpic/44.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="5"
                                                                         src="/home/img/gdpic/55.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="6"
                                                                         src="/home/img/gdpic/66.jpg"/></a>
                                    </td>
                                    <td><a href="#" target="_blank"><img height="150"
                                                                         width="150" alt="7"
                                                                         src="/home/img/gdpic/77.jpg"/></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <div id="scrollcopy" style="width: 100%;"></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--引入底部footer.html文件-->
<div id="footer"></div>


<!-- 底部图片滚动广告开始 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    a, img {
        border: 0;
    }

    table {
        empty-cells: show;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .titbox {
        font-size: 18px;
        color: #3366cc;
        height: 32px;
        overflow: hidden;
        width: 880px;
        margin: 20px auto;
    }

    .scroll {
        width: 880px;
        color: #333333;
        margin: 0 auto;
        overflow: hidden;
    }

    .scroll img {
        border: solid 1px #ddd;
        margin: 0 5px;
    }

    .scroll a:hover img {
        border: solid 1px #990000;
    }
</style>
<script>

    var dir = 1;//每步移动像素，大＝快
    var speed = 10;//循环周期（毫秒）大＝慢
    var MyMar = null;

    function Marquee() {//正常移动
        var scrollbox = document.getElementById("scrollbox");
        var scrollcopy = document.getElementById("scrollcopy");
        if (dir > 0 && (scrollcopy.offsetWidth - scrollbox.scrollLeft) <= 0) {
            scrollbox.scrollLeft = 0;
        }
        if (dir < 0 && (scrollbox.scrollLeft <= 0)) {
            scrollbox.scrollLeft = scrollcopy.offsetWidth;
        }
        scrollbox.scrollLeft += dir;
    }

    function onmouseoverMy() {
        window.clearInterval(MyMar);
    }//暂停移动

    function onmouseoutMy() {
        MyMar = setInterval(Marquee, speed);
    }//继续移动

    function r_left() {
        if (dir == -1)
            dir = 1;
    }//换向左移

    function r_right() {
        if (dir == 1)
            dir = -1;
    }//换向右移

    function IsIE() {
        var browser = navigator.appName
        if ((browser == "Netscape")) {
            return false;
        } else if (browser == "Microsoft Internet Explorer") {
            return true;
        } else {
            return null;
        }
    }

    var _IsIE = IsIE();
    var _MousePX = 0;
    var _MousePY = 0;
    var _DivLeft = 0;
    var _DivRight = 0;
    var _AllDivWidth = 0;
    var _AllDivHeight = 0;

    function MoveDiv(e) {

        var obj = document.getElementById("scrollbox");
        _MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;
        _MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;
        //Opera Browser Can Support ''window.event'' and ''e.pageX''

        var obj1 = null;

        if (obj.getBoundingClientRect) {
            //IE
            obj1 = document.getElementById("scrollbox").getBoundingClientRect();
            _DivLeft = obj1.left;
            _DivRight = obj1.right;
            _AllDivWidth = _DivRight - _DivLeft;
        } else if (document.getBoxObjectFor) {
            //FireFox
            obj1 = document.getBoxObjectFor(obj);
            var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
            _DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
            _AllDivWidth = Cut_Px(obj.style.width);
            _DivRight = _DivLeft + _AllDivWidth;
        } else {
            //Other Browser(Opera)
            _DivLeft = obj.offsetLeft;
            _AllDivWidth = Cut_Px(obj.style.width);
            var parent = obj.offsetParent;

            if (parent != obj) {
                while (parent) {
                    _DivLeft += parent.offsetLeft;
                    parent = parent.offsetParent;
                }
            }
            _DivRight = _DivLeft + _AllDivWidth;
        }

        var pos1, pos2;
        pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;
        pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;

        if (_MousePX > _DivLeft && _MousePX < _DivRight) {
            if (_MousePX > _DivLeft && _MousePX < pos1) {
                r_left(); //Move left
            } else if (_MousePX < _DivRight && _MousePX > pos2) {
                r_right(); //Move right
            }
            if (_MousePX > pos1 && _MousePX < pos2) {
                onmouseoverMy(); //Stop
                MyMar = null;
            } else if (_MousePX < pos1 || _MousePX > pos2) {
                if (MyMar == null) {
                    MyMar = setInterval(Marquee, speed);
                }
            }
        }
    }

    function Cut_Px(cswidth) {
        cswidth = cswidth.toLowerCase();
        if (cswidth.indexOf("px") != -1) {
            cswidth.replace("px", "");
            cswidth = parseInt(cswidth);
        }
        return cswidth;
    }

    function MoveOutDiv() {
        if (MyMar == null) {
            MyMar = setInterval(Marquee, speed);
        }
    }

    document.getElementById("scrollcopy").innerHTML = document.getElementById("scrollcon").innerHTML;
    MyMar = setInterval(Marquee, speed);
</script>
<!-- 底部图片滚动广告结束 -->

<script type="text/javascript" src="/home/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/home/js/city-data.js"></script>
<script type="text/javascript" src="/home/js/hzw-city-picker.min.js"></script>

<script type="text/javascript">
    // 聊天窗口状态变化处理函数
    window.onChatWindowStateChange = function (isMinimized) {
        console.log('Chat window state changed:', isMinimized);
    };

    // 智能客服控制逻辑
    (function () {
        const chatToggleBtn = document.getElementById('chatToggleBtn');
        const chatIframe = document.getElementById('chatIframe');
        let chatVisible = false;

        // 显示/隐藏智能客服
        function toggleChat() {
            if (chatVisible) {
                // 隐藏聊天窗口
                chatIframe.style.display = 'none';
                chatToggleBtn.classList.remove('active');
                chatToggleBtn.title = '打开智能客服';
                chatToggleBtn.innerHTML = '💬';

                // 隐藏时通知iframe
                if (chatIframe.contentWindow && chatIframe.contentWindow.ChatWindow) {
                    try {
                        chatIframe.contentWindow.ChatWindow.hide();
                    } catch (e) {
                        console.error('Error hiding chat window:', e);
                    }
                }
            } else {
                // 确保iframe内容已加载
                chatIframe.style.opacity = '1';

                // 显示聊天窗口
                chatIframe.style.display = 'block';
                chatToggleBtn.classList.add('active');
                chatToggleBtn.title = '关闭智能客服';
                chatToggleBtn.innerHTML = '✕';

                // 延迟一小段时间确保iframe内容已加载完成
                setTimeout(() => {
                    // 显示时通知iframe，确保是完整显示状态
                    if (chatIframe.contentWindow && chatIframe.contentWindow.ChatWindow) {
                        try {
                            // 先调用show方法
                            chatIframe.contentWindow.ChatWindow.show();
                            // 确保窗口处于最大化状态
                            chatIframe.contentWindow.ChatWindow.maximize();
                        } catch (e) {
                            console.error('Error showing chat window:', e);
                        }
                    }
                }, 100);
            }
            chatVisible = !chatVisible;
        }

        // 添加按钮点击事件
        if (chatToggleBtn) {
            chatToggleBtn.addEventListener('click', toggleChat);
        }

        // 添加iframe加载完成事件处理
        chatIframe.onload = function () {
            console.log('Chat iframe loaded successfully');
        };

        // 处理iframe加载错误
        chatIframe.onerror = function () {
            console.error('Failed to load chat iframe');
        };

        // 延迟加载iframe内容，优化页面加载速度
        function lazyLoadChat() {
            // 监听滚动或点击事件来触发加载
            function handleUserInteraction() {
                // 确保iframe正确加载并显示
                chatIframe.style.display = 'none'; // 先保持隐藏直到内容加载
                chatIframe.style.opacity = '1';

                // 移除事件监听器，避免重复加载
                window.removeEventListener('scroll', handleUserInteraction);
                window.removeEventListener('click', handleUserInteraction);
                window.removeEventListener('keydown', handleUserInteraction);
            }

            // 当用户滚动、点击或按下键盘时加载
            setTimeout(() => {
                window.addEventListener('scroll', handleUserInteraction);
                window.addEventListener('click', handleUserInteraction);
                window.addEventListener('keydown', handleUserInteraction);

                // 30秒后自动加载，即使用户没有交互
                setTimeout(handleUserInteraction, 30000);
            }, 1000);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', lazyLoadChat);
    })();


    $(document).ready(function () {
        // 加载header.html
        $('#header').load('/home/header.html');

        // 加载footer.html
        $('#footer').load('/home/footer.html');
    });
</script>

</body>
</html>
